<template>
	<view>
		<view class="top">
			<view class="image">
				<img src="@/static/icon/faxingnv.png">
			</view>
			<view class="title">燕子</view>
		</view>
		<view class="introduce">
			<view class="text">
				<table class="mytable" align="center">
					<tr align="center">
						<td>性别</td>
						<td>女</td>
					</tr>
					<tr align="center">
						<td>工龄</td>
						<td>16</td>
					</tr>
					<tr align="center">
						<td>擅长</td>
						<td>女士烫染等</td>
					</tr>
					<tr align="center">
						<td>价格</td>
						<td>和标价同</td>
					</tr>
				</table>
			</view>
		</view>
		<view>
			<button class="btn" @click=next>下一位</button>
			<view style="text-align: center;"> 第2/2位</view>
			<button class="btn" @click=home>返回首页</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
		
			};
		},
		components:{},
		onLoad(){},
		methods: {
			next(){
				uni.showModal({
					title:'提示',
					content:'已经是最后一位了'
				})
			},
			home(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	.top{
		height: 350rpx;
		width: auto;
		background-color: #0081FF;
		padding: 1rpx;
	}
	.introduce{
		height:550rpx;
	}
	.image{
		margin-top: 50rpx;
		margin-left: calc((100% - 200rpx) / 2);
	    background-color:#ffffff;
	    width:200rpx;
	    height:200rpx;
	    border-radius: 50%;
	}
	img{
	    border-radius: 50%;
	    width: 100%;
	    height: 100%;
	}
	.title{
		margin-top: 30rpx;
		margin-left: calc((100% - 500rpx) / 2);
		height: 80rpx;
		width: 500rpx;
		text-align: center;
		font-size:38rpx;
		color: #ffff00;
	}
	.text{
		margin-top: 20rpx;
		font-size:36rpx;
		color: #000000;
	}
	.mytable{
		height:450rpx;
		width:550rpx;
		margin-left: calc((100% - 500rpx) / 2);
		border:1px solid #ccc; 
	}
	.btn{
			font-size:36rpx;
			text-align:center;
			color:white;
			background-color:#0055ff;
			height: 80rpx;
			line-height: 80rpx;
			width:300rpx;
		}
</style>
